<template>
	<view class="information-management">
		<NavBar title="订单列表" :isBack="true"></NavBar>
		<view class="content">
			<view class="search">
				<image src="@/static/icons/search.png"></image>
				<input v-model="form.search" @input="getList" type="text" placeholder="输入订单相关词或订单号搜索"
					placeholder-class="placeholder">
			</view>
			<up-empty mode="data" v-if="!orderList.length"></up-empty>
			<view class="order-list">
				<view class="box" v-for="(item, index) in orderList" :key="index">
					<view class="header">
						<view>
							<view class="title">服务点：{{ item.servername }}</view>
							<view>订单号：{{ item.orderid }}</view>
						</view>
						<view class="status" :class="{ 'fulfil': index }">{{ item.status }}</view>
					</view>
					<view class="middle">
						<view>
							<image :src="item.shops?.cover"></image>
						</view>
						<view>
							<view class="row">
								<view>{{ item.shops?.title }}</view>
								<view class="num">x{{ item.num }}</view>
							</view>
							<view class="price">¥ {{ item.price }}</view>
						</view>
					</view>
					<view class="footer">
						<view class="row">
							<view>实付款</view>
							<view class="price">¥{{ item.paymoney }}</view>
						</view>
						<view class="row">
							<view>完成服务时间</view>
							<view>{{ item.service_time }}</view>
						</view>
						<view class="btn">
							<view>确认完成</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { getOrderListServerPoint } from '@/api/services'
import { onMounted, reactive, toRefs } from 'vue'
import Search from '@/components/Search.vue'

const state = reactive({
	orderList: [],
	form: {
		id: "",
		search: "",
	},
})


function getList () {
	uni.showLoading({ title: '加载中' });
	getOrderListServerPoint(state.form).then(res => {
		state.orderList = res.data.data
		console.log(state.orderList);
		uni.hideLoading()
	})
}

onMounted(() => {
	getList()
})

const { orderList, form } = toRefs(state)

</script>

<style lang="scss" scoped>
.information-management {
	.content {
		position: relative;
		padding: 36rpx;
		z-index: 1;

		.search {
			width: 678rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 22rpx 22rpx 22rpx 22rpx;
			padding: 38rpx 22rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			margin-bottom: 28rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 22rpx;
			}

			.placeholder {
				font-weight: 500;
				color: #999999;
				font-size: 22rpx;
			}
		}

		.order-list {
			.box {
				background: #FFFFFF;
				border-radius: 22rpx 22rpx 22rpx 22rpx;
				padding: 30rpx;
				box-sizing: border-box;
				margin-bottom: 36rpx;

				.header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 18rpx;

					.title {
						font-weight: bold;
						font-size: 26rpx;
						color: #333333;
						margin-bottom: 11rpx;
					}

					.status {
						text-align: center;
						width: 102rpx;
						height: 38rpx;
						line-height: 38rpx;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						font-weight: 500;
						font-size: 18rpx;
						color: #FF0000;
						background: rgba(255, 0, 0, 0.1);
						border: 1rpx solid #FF0000;
					}

					.fulfil {
						background: rgba(88, 219, 207, 0.1);
						border: 1rpx solid #58DBCF;
						color: #58DBCF;
					}
				}

				.middle {
					display: flex;
					align-items: center;
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
					padding: 21rpx 0rpx 28rpx;
					border-bottom: 1rpx solid #F5F5F5;
					border-top: 1rpx solid #F5F5F5;

					.row {
						display: flex;
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
						margin-bottom: 8rpx;

						.num {
							font-weight: 500;
							font-size: 24rpx;
							color: #999999;
							margin-left: 47rpx;
						}
					}

					.price {
						font-weight: 800;
						font-size: 30rpx;
						color: #333333;
						margin-top: 40rpx;
					}

					image {
						width: 155rpx;
						height: 155rpx;
						margin-right: 24rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
					}
				}

				.footer {
					margin-top: 36rpx;

					.row {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
						margin-bottom: 28rpx;

						.price {
							font-weight: 800;
							font-size: 24rpx;
							color: #333333;
						}
					}

					.btn {
						display: flex;
						justify-content: flex-end;

						view {
							text-align: center;
							width: 192rpx;
							height: 66rpx;
							line-height: 66rpx;
							background: #58DBCF;
							border-radius: 500rpx 500rpx 500rpx 500rpx;
							font-weight: 800;
							font-size: 30rpx;
							color: #FFFFFF;
							margin-top: 62rpx;
						}
					}
				}
			}
		}
	}
}
</style>
